<template>
  <div class="upload-container">
    <div>
      <h3>$attrs $listeners  多层次组件嵌套通讯问题</h3>
      <test  :foo="foo"  :coo="coo"  @upRocket="reciveRocket"></test>
    </div>
    <hr>
    <div>
        <h3>动画</h3>
        animation:<br>
        name指定 @keyframes 动画的名称,<br>
        duration:指定动画完成一个周期所需要时间<br>
        timing-function:指定动画完成一个周期所需要时间<br>
        delay:指定动画延迟时间，即动画何时开始，默认是 0<br>
        iteration-count:指定动画播放的次数，默认是 1。<br>
        direction:指定动画播放的方向。默认是 normal<br>
        fill-mode:指定动画填充模式。默认是 none。<br>
        <div class="yuan"></div>
        <div class="threed"></div>
    </div>
    <hr>
    <div>
      指令
      <input v-miaofocus />
    </div>
    <hr>
    <div>
      <h3>solt</h3>
      <el-button type="primary" @click="()=>this.$refs.testSolt.open()">open</el-button>
      <testSolt ref="testSolt">
        <div>
          <ul>
            <ol>1</ol>
            <ol>2</ol>
            <ol>3</ol>
          </ul>
        </div>
         <div slot="namesolt">
          <ul>
            <ol>一</ol>
            <ol>二</ol>
            <ol>三</ol>
          </ul>
        </div>
      </testSolt>
    </div>
    <hr>
    <div>
       <h1>{{num}}</h1>
       <el-button @click="handleADD">add</el-button>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import test from './test.vue'
import testSolt from './testSolt.vue'
export default {
  components:{
    test,
    testSolt
  },
  data() {
    return {
      foo:"Hello, world",
      coo:"Hello,rui",
      centerDialogVisible:false,
      // num:this.$store.getters.num,
    };
  },
  computed:{
    num(){
      return this.$store.getters.aaa
    }
  },
  mounted(){
    console.log(this.$store.getters.aaa)
  },
  methods:{
    reciveRocket(){
      console.log('c->a.')
    },
    handleADD(){
      this.$store.commit('addNum')
    }
  },
  directives:{
    miaofocus:{

      inserted(el){
        el.focus()
      }
    }
  }
};
</script>

<style scoped>
.upload-container{
 padding: 10px 25px;
}
.yuan{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  animation: move 2s linear 3 alternate both;
}
@keyframes move{
  0%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(200px,0);
  }
}
.threed{
  width: 100px;
  height: 100px;
  background: blue;
  animation:threed 2s;
}
@keyframes threed {
  0%{
     transform: rotate(0deg)
  }
  100%{
    transform: rotate(360deg)
  }
}
</style>